import React, {useState} from 'react';

// 定义自己的hook
const useInputVal = ()=>{
  // 1.声明变量  2.与输入框同步
  let [val, setVal] = useState('');
  return {
    val: val,
    onChange: (e)=>setVal(e.target.value)
  }
}

const Myhook = () => {
  const login = ()=>{
    console.log(111, name, pwd);
  }
  const {...name} = useInputVal()
  const {...pwd} = useInputVal()
  // 新的登录
  const login2 = () => {
    console.log(222, name.val, pwd.val);
  }
  // const [name, setName] = useState('');
  // const [pwd, setPwd] = useState('');
  return (
    <div>
      {/* <p>自定义hook</p>
      <input type="text" value={name} onChange={(e)=>setName(e.target.value)} placeholder="name"/>
      <br></br>
      <input type="text" value={pwd} onChange={(e)=>setPwd(e.target.value)} placeholder="password"/>
      <br></br>
      <button onClick={()=>login()}>登录</button> */}
      {/* 以上是老的代码 */}
      <p>自定义hook</p>
      <input type="text" placeholder="name" {...name} />
      <br></br>
      <input type="text" placeholder="password" {...pwd} />
      <br></br>
      <button onClick={()=>login2()}>登录</button>
    </div>
  );
}

export default Myhook;
